<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>用户列表统计</title>

	<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="../assets/css/jquery-ui.min.css" />
	<link rel="stylesheet" href="../assets/css/components.css">
	<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="../assets/css/uniform.default.css">
	<link rel="stylesheet" href="../assets/css/bootstrap-switch.min.css">
	<link rel="stylesheet" href="../assets/css/layout.css">
	<link rel="stylesheet" href="../assets/css/plugins.css">
	<link rel="stylesheet" href="../assets/css/darkblue.css">
	<link rel="stylesheet" href="../assets/css/custom.css">
</head>

<body>
	<div>
		<div class="col-md-12">
			<!-- BEGIN CHART PORTLET-->
			<div class="portlet light bordered">
				<div class="portlet-title">
					<div class="caption">
						<i class="icon-bar-chart font-green-haze"></i>
						<span class="caption-subject bold uppercase font-green-haze"> Bar Charts</span>
						<span class="caption-helper">column and line mix</span>
					</div>
					<div class="tools">
						<a href="javascript:;" class="collapse">
						</a>
						<a href="#portlet-config" data-toggle="modal" class="config">
						</a>
						<a href="javascript:;" class="reload">
						</a>
						<a href="javascript:;" class="fullscreen">
						</a>
						<a href="javascript:;" class="remove">
						</a>
					</div>
				</div>
				<div class="portlet-body">
					<div id="main" style="height: 500px;">
					</div>
				</div>
			</div>
			<!-- END CHART PORTLET-->
		</div>
	</div>


	<script src="../assets/js/jquery-2.1.4.min.js"></script>

	<script type="text/javascript">
		if ('ontouchstart' in document.documentElement) document.write(
			"<script src='../assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
	</script>

	<script src="../assets/js/jquery-migrate.min.js"></script>
	<script src="../assets/js/jquery-ui.min.js"></script>
	<script src="../assets/js/bootstrap.min.js"></script>

	<script src="../assets/js/jquery.slimscroll.min.js"></script>


	<!-- page specific plugin scripts -->

	<!--[if lte IE 8]>
	<script src="../assets/js/excanvas.min.js"></script>
<![endif]-->
	<script src="../assets/js/bootstrap-datepicker.min.js"></script>
	<!-- <script src="../assets/js/jquery.jqGrid.min.js"></script> -->
	<!-- <script src="../assets/js/grid.locale-en.js"></script> -->

	<!-- ace scripts -->
	<script src="../assets/js/ace-elements.min.js"></script>
	<script src="../assets/js/ace.min.js"></script>

	<!-- inline scripts related to this page -->


	<script src="../assets/js/metronic.js"></script>
	<script src="../assets/js/layout.js"></script>
	<script src="../assets/js/demo.js"></script>
	<script src="../assets/js/jquery.uniform.min.js"></script>
	<script>
		jQuery(document).ready(function () {
			// initiate layout and plugins
			Metronic.init(); // init metronic core components
			Layout.init(); // init current layout
			Demo.init(); // init demo features
		});
	</script>
	<script src="../assets/js/echarts.min.js"></script>

	<script>
		    var myChart = echarts.init(document.getElementById('main'));	// 

		    var option = {
 
        backgroundColor: '#FFF0F5',
 
        title: {
          text: '折线图',
          subtext: '模拟数据',
          x: 'center'
        },
 
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'horizontal',
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: 'left',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'top',
          data: ['预期','实际','假设']
        },
 
        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
            top: '16%',   // 等价于 y: '16%'
            left: '3%', 
            right: '8%',
            bottom: '3%',
            containLabel: true
        },
 
        // 提示框
        tooltip: {
          trigger: 'axis'
        },
 
        //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {} //下载工具
            }
        },
 
        xAxis: {
          name: '周几',
          type: 'category',
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#912CEE'
            }
          },
          // 设置X轴数据旋转倾斜
          axisLabel: {
            rotate: 30, // 旋转角度
            interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
            },
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']	// TODO 修改为日期序列
        },
 
        yAxis: {
          name: '数值',
          type: 'value',
          min:0, // 设置y轴刻度的最小值
          max:1800,  // 设置y轴刻度的最大值
          splitNumber:9,  // 设置y轴刻度间隔个数
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: '#87CEFA'
            }
          },
        },
 
        series: [
 
          {
            name: '实际',
            data: [620, 732, 941, 834, 1690, 1030, 920],	// TODO 修改为气温序列
            type: 'line',
            // 设置折线上圆点大小
            symbolSize:8,
            itemStyle:{
              normal:{
                // 拐点上显示数值
                label : {
                show: true
                },
                borderColor:'red',  // 拐点边框颜色
                lineStyle:{                 
                  width:5,  // 设置线宽
                  type:'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            }
          },
 
        ],
        
        color: ['#00EE00', '#FF9F7F','#FFD700']
      };

        // 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);

	</script>
</body>

</html>